'use strict'
import { View } from '../../component'
import style from './css.css'
import FlyGold from './flyGold'

class SigCard extends React.Component {
  static propTypes = {
    sigState: PropTypes.number, // 0: 未签到，1: 已签到，2: 今日
    gold: PropTypes.number,
    day: PropTypes.number,
    feed: PropTypes.object
  }

  static defaultProps = {
    sigState: 0
  }

  _handleFlyingGoldEnd = this._handleFlyingGoldEnd.bind(this)

  constructor (props) {
    super(props)
    this.state = {
      sigState: this.props.sigState,
      maskOpacity: false
    }
  }

  componentWillReceiveProps (nextProps) {
    this.setState({
      sigState: nextProps.sigState
    })
  }

  _handleFlyingGoldEnd () {
    this.setState({
      maskOpacity: true
    })
  }

  render () {
    const sigState = this.state.sigState
    const feed = this.props.feed ? this.props.feed : { day: 1, reward: 1 }
    return (
      <View className={`${style.sigCard} ${sigState === 2 ? style.sigCardGreen : ''}`}>
        <View className={`${style.sigCardTitle} ${sigState === 2 ? style.sigCardTitleGreen : ''}`}>第{feed.day}天</View>
        {
          sigState === 2 ? <FlyGold onAnimateEnd={this._handleFlyingGoldEnd}></FlyGold> : <View className={`${style.sigGold} ${style['sigGold' + feed.reward]}`} / >
        }
        <View className={`${style.sigCardMaskHide} ${sigState === 1 ? style.sigCardMask : ''} ${this.state.maskOpacity ? style.sigCardMaskOpacity : ''}`}>
          <View className={`${style.signCardCheck}`}/>
        </View>
        <View className={`${style.sigCardGoldCount} ${sigState === 2 ? style.sigGoldCountGreen : ''}`}>{feed.reward}</View>
      </View>
    )
  }
}

export default SigCard
